<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mainnav {
            background: url(../images/mainnavbg.png) repeat-x;
            height: 73px;
            width: 100%;
            position: relative;
            z-index: 3;
        }
        
        .navwrap .navul {
            position: relative;
            height: 100%;
            float: left;
            margin-left: 150px;
        }
        
        .mainnav .navwrap {
            width: 933px;
            margin: 0 auto;
            height: 73px;
        }
        
        .mainnav li.navlist {
            float: left;
            height: 70px;
            position: relative;
            z-index: 2;
        }
        
        .nav_bg {
            background: #a24601;
        }
        
        .mainnav a.nav_a {
            padding: 10px 28px 0;
            font-size: 17px;
            color: #000;
            text-align: center;
        }
        
        .mainnav a span {
            font-size: 13px;
        }
        
        .downlist .navitem {
            float: left;
            height: 48px;
            line-height: 48px;
            margin: 0 18px;
            border-bottom: 1px solid #7c3500;
            padding: 0 18px;
        }
        
        .downlist .lastitem {
            border-bottom: none;
        }
        
        .downlist {
            position: absolute;
            top: 70px;
            left: 0;
            width: 98.5%;
            border: 1px solid #472201;
            background-color: #ff7817;
            z-index: 1;
            display: none;
        }
        
        .navitem a {
            font-size: 18px;
            color: #000;
        }
        
        .navitem .dl_hover {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="mainnav">
        <div class="navwrap">
            <ul class="navul">
                <li class="navlist"><a class="nav_a" href="index.html">首页<br/><span>Home</span></a></li>
                <li class="navlist"><a class="nav_a" href="#dotwrap">奖励说明<br/><span>Award description</span></a></li class="navlist">
                <li class="navlist"><a class="nav_a" href="#">人气投票<br/><span>Popular vote</span></a></li>
                <li class="navlist"><a class="nav_a" href="#">Q&amp;A<br/><span>interlocution</span></a></li>

                <li class="navlist">
                    <a class="nav_a" href="#">关于Marvell<br/><span>About Marvell</span></a> 10
                    <div class="downlist clear">

                        <ul>

                            <li class="navitem"><a href="#">美满全球</a></li>

                            <li class="navitem lastitem"><a href="#">美满中国</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        /**
         * 动态添加导航下方的滑动条
         */
        var navul = document.getElementsByClassName('navul');
        var navBtn = document.createElement('div');
        //设置css样式,注意transition:all
        navBtn.style.cssText = 'position:absolute;width:0;bottom:3px;left:0;z-index:998;height:5px;background-color:#4486d4;' +
            'box-shadow:0 0 3px #fff;transition:all .5s ease;'
            //把创建的这个div添加到ul中
        navul[0].appendChild(navBtn);
        //获取里面的a元素
        var nav_a = document.getElementsByClassName('nav_a');
        var len = nav_a.length;
        for (var i = 0; i < len; i++) {
            //currentStyle:IE的选中样式。 getComputedStyle:FF的计算后样式

            var style = nav_a[i].currentStyle || getComputedStyle(nav_a[i]);
            //style.paddingLeft得到的值是带有'px'的，所以转换成Number类型

            var pL = parseInt(style.paddingLeft, 10);

            var pR = parseInt(style.paddingRight, 10)
                //样式初始化
            navBtn.style.width = (nav_a[0].offsetWidth - pL - pR) + 'px';
            navBtn.style.left = (nav_a[0].offsetLeft + pL) + 'px';
            //给当前对象添加事件。
            nav_a[i].addEventListener('mouseenter', function() {
                //this指的是当前的这个对象
                navBtn.style.width = (this.offsetWidth - pL - pR) + 'px';
                navBtn.style.left = (this.offsetParent.offsetLeft + pL) + 'px';

            }, false);
            nav_a[i].addEventListener('mouseleave', function() {
                navBtn.style.width = (nav_a[0].offsetWidth - pL - pR) + 'px';
                navBtn.style.left = (nav_a[0].offsetLeft + pL) + 'px';

            }, false);

        }
    </script>

</body>

</html>



<li class="navbar-nav-li">
    <div>
        <button class="dropbtn">首页</button>
    </div>
</li>
<li>
    <div class="dropdown">
        <button class="dropbtn">业务图谱</button>
        <div class="dropdown-content">
            <a href="#">图谱可视化</a>
            <a href="#">本体管理</a>
            <a href="#">实体管理</a>
        </div>
    </div>
</li>
<li>
    <div class="dropdown">
        <button class="dropbtn">民政智库</button>
        <div class="dropdown-content">
            <a href="#">文件管理</a>
            <a href="#">知识检索</a>
        </div>
    </div>
</li>
<li>
    <div class="dropdown">
        <button class="dropbtn">数据管理</button>
        <div class="dropdown-content">
            <a href="#">元数据管理</a>
            <a href="#">主数据管理</a>
            <a href="#">安全中心</a>
            <a href="#">数据治理</a>
            <a href="#">多维分析</a>
            <a href="#">任务调度</a>
            <a href="#">数据集成</a>
            <a href="#">智能标注</a>
            <a href="#">实时流分析</a>
        </div>
    </div>
</li>
<li>
    <div class="dropdown">
        <button class="dropbtn">数据超市</button>
        <div class="dropdown-content">
            <a href="#">应用市场</a>
            <a href="#">API市场</a>
        </div>
    </div>
</li>
<li>
    <div class="dropdown">
        <button class="dropbtn">领导驾驶舱</button>
        <div class="dropdown-content">
            <a href="#">综合看板</a>
            <a href="#">敏捷BI</a>
        </div>
    </div>
</li>
<li>
    <div class="dropdown">
        <button class="dropbtn">服务与支持</button>
    </div>
</li>